<template>
    <header class="page-header">
        <img :src="state?logoLight:logoDark" class="logo" :alt="title" :title="title">
        <div class="menu">
            <ul>
                <li @click.native="routerToPath('/main')">首页</li>
                <li>
                    <Dropdown placement="bottomLeft">
                    <span class="flex flex-nowrap justify-start items-center" @click.prevent>JSON格式化<DownOutlined class="ml-0.5" /></span>
                    <template #overlay>
                        <Menu>
                            <MenuItem key="0" @click.native="routerToPath('/')">JSON在线解析</MenuItem>
                            <MenuItem key="1">JSON压缩转义</MenuItem>
                            <MenuItem key="2">JSON/XML互转</MenuItem>
                            <MenuItem key="3">JSON对比</MenuItem>
                        </Menu>
                    </template>
                    </Dropdown>
                </li>
                <li>
                    <Dropdown placement="bottomLeft">
                    <span class="flex flex-nowrap justify-start items-center" @click.prevent>文档转换<DownOutlined class="ml-0.5" /></span>
                    <template #overlay>
                        <Menu>
                            <MenuItem key="0">PDF转WORD</MenuItem>
                            <MenuItem key="1">PDF转PPT</MenuItem>
                            <MenuItem key="2">PDF转图片</MenuItem>
                            <MenuItem key="3">PDF压缩</MenuItem>
                            <MenuItem key="4">PDF拆分</MenuItem>
                            <MenuItem key="4">PDF转EXCEL</MenuItem>
                            <MenuItem key="5">WORD转PDF</MenuItem>
                            <MenuItem key="5">PPT转PDF</MenuItem>
                            <MenuItem key="5">图片转PDF</MenuItem>
                            <MenuItem key="6">EXCEL转PDF</MenuItem>
                        </Menu>
                    </template>
                    </Dropdown>  
                </li>
                <li>
                    <Dropdown placement="bottomLeft">
                    <span class="flex flex-nowrap justify-start items-center" @click.prevent>比对编辑<DownOutlined class="ml-0.5" /></span>
                    <template #overlay>
                        <Menu>
                            <MenuItem key="0" @click.native="routerToPath('/code')">代码在线编辑</MenuItem>
                            <MenuItem key="1" @click.native="routerToPath('/code/comparison')">代码比对</MenuItem>
                        </Menu>
                    </template>
                    </Dropdown>  
                </li>
                <li @click="routerToPath('/short-link')">短链接</li>
            </ul>
            <Switch v-model:checked="state" @change="changeTheme">
                <template #checkedChildren class="flex flex-nowrap justify-start items-center"><FrownTwoTone /></template>
                <template #unCheckedChildren class="flex flex-nowrap justify-start items-center"><AlertOutlined /></template>
            </Switch>
            <Button class="login-btn" type="primary" shape="round">登录</Button>
        </div>
        <FloatButtonGroup shape="square" :style="{ right: '24px', bottom: '24px'}">
            <FloatButton>
                <template #icon>
                    <QuestionCircleOutlined />
                </template>
            </FloatButton>
            <BackTop :visibility-height="0" />
        </FloatButtonGroup>
    </header>
</template>
<script lang="ts" setup>
    import { Switch,Button,Menu,MenuItem,Dropdown,FloatButtonGroup,FloatButton,BackTop } from 'ant-design-vue'
    import { usePageContext } from 'vike-vue/usePageContext'
    import { DownOutlined,QuestionCircleOutlined, SyncOutlined, FrownTwoTone, AlertOutlined} from '@ant-design/icons-vue';
    import { ref,onMounted } from 'vue'
    import cache from '@/utils/cache'
    import useUserStore from '@/stores/useUserStore'
    const state = ref(false)
    const ctx = usePageContext()
    const userStore = useUserStore()
    const title = ctx.config?.title||''
    import logoDark from '../assets/logo_dark.png'
    import logoLight from '../assets/logo_light.png'

    onMounted(()=>{
        state.value = cache.getTheme() === 'dark' ? true : false
    })
    function changeTheme(val:any){
        (document.activeElement as any).blur()
        state.value = val
        if(val){
            userStore.setTheme('dark')
            document.querySelector('html')?.setAttribute('data-theme','dark')
        }else{
            userStore.setTheme('light')
            document.querySelector('html')?.setAttribute('data-theme','light')
        }
    }

    function routerToPath(url:string){
        window.location.href = url
    }

</script>
<style lang="scss" scoped>
    .page-header {
        padding: 20px 32px;
        @include flex_row;
        width: $header-content-width;
        margin: 0 auto;
        // @include background_color('bg-color');
        .logo{
            max-height: 32px;
            cursor: pointer;
        }
        .menu{
            @include flex_row(row nowrap,flex-end,center); 
            ul{
                list-style: none;
                display: flex;
                margin: 0;
                padding: 0;
                margin-right: 40px;
                @include flex_row(row nowrap,flex-end,center);
                li{
                    margin-left: 24px;
                    font-size: 14px;
                    cursor: pointer;
                    padding: 6px 10px;
                    @include font_color('font-color');
                    &:hover{
                        @include font_color_hover;
                    }
                }
            }
            .login-btn{
                margin-left: 10px;
                font-size: 12px;
                @include font_color('main-btn-font');
                @include background_color('main-btn-font-hover-bg');
                @include border_color('main-btn-border');
            }
        }
    }
</style>